<template>
  <view class="h_container" v-if="show">
    <image class="h_logo" src="@/static/index/doctor_logo.png" />
    <view class="h_middle">
      <view class="middle_title">欢迎来到咪婴伴侣～ </view>
    </view>
    <view class="h_login" @click="login">马上登录</view>
    <view class="h_close" @click.stop="show = false">
      <image src="@/static/images/close_btn_icon.png" mode="scaleToFill" />
    </view>
    <h-login ref="loginRef"></h-login>
  </view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { useMemberStore, useSystemStore } from '@/stores'
const token = useMemberStore().token
const show = ref(true)
const loginRef = ref(null)
const emit = defineEmits(['showLogin'])
function login() {
  const token = useMemberStore().token
  if (!token) return emit('showLogin')
}
</script>

<style lang="scss" scoped>
.h_container {
  position: fixed;
  left: 50%;
  bottom: 150rpx;
  transform: translateX(-50%);
  width: 687rpx;
  height: 109rpx;
  background: #333333;
  border-radius: 15rpx 15rpx 15rpx 15rpx;
  opacity: 0.86;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32rpx 0 25rpx;
  z-index: 997;

  .h_logo {
    width: 69rpx;
    height: 69rpx;
    border-radius: 50%;
    margin-right: 11rpx;
    background-color: #fff;
  }

  .h_middle {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12rpx 0;

    .middle_title {
      font-weight: 600;
      font-size: 26rpx;
      color: #ffffff;
    }

    .middle_hot_text {
      font-weight: 500;
      font-size: 24rpx;
      color: #ffffff;
    }
  }

  .h_login {
    width: 164rpx;
    height: 52rpx;
    background: #ffb300;
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 28rpx;
    color: #ffffff;
  }

  .h_close {
    position: absolute;
    top: 8rpx;
    right: 8rpx;
    width: 22rpx;
    height: 22rpx;
    background: #f2f2f2;
    border-radius: 13rpx 13rpx 13rpx 13rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 22rpx;
      height: 22rpx;
      border-radius: 13rpx 13rpx 13rpx 13rpx;
    }
  }
}
</style>
